<template>
    <div>
        <bread :second="'商品管理'" :third="'商品列表'"></bread>
            <!-- 表单 -->
     <el-card class="box-card">
    <el-row :gutter="20">
      <el-col :span="8">
        <div style="margin-top: 15px;">
          <el-input placeholder="请输入要查询的用户名" v-model="Goodsparams.query" clearable  class="input-with-select">
            <el-button slot="append" @click="GetGoodsList" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-col>
      <!-- 表单按钮 -->
      <el-col :span="8">
        <div style="margin-top: 15px;text-align: left;">
          <el-button  type="primary" @click="AddGoods">添加用户</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
      <el-table
    :data="tableData"
    border
    style="width: 100%;margin:20px 0;">
    <el-table-column
      type="index"
      label="序号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="goods_name"
      label="商品名称"
      width="250">
    </el-table-column>
    <el-table-column
      prop="goods_price"
      label="商品价格(元)"
      width="50">
    </el-table-column>
    <el-table-column
      prop="goods_weight"
      label="商品重量(kg)"
      width="50"
      >
    </el-table-column>
    <el-table-column
      prop="upd_time"
      label="创建时间">
    </el-table-column>
    <el-table-column
      label="操作">
      <!-- 插槽 -->
        <template slot-scope='scope'>
            <el-button size="mini" type="primary" @click="editCommodity(scope.row)">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button size="mini" @click="DelGoodsBtn(scope.row.goods_id)" type="danger">
              <i class="el-icon-delete"></i>
            </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Goodsparams.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="Goodsparams.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
     </el-card>

     <!-- 编辑商品弹出层 -->
        <el-dialog title="编辑商品信息" :visible.sync="dialogFormVisible">
      <el-form :model="formAdd"  ref="formAdd" :rules="addRules">
        <el-form-item label="商品名称" :label-width="formLabelWidth" prop="goods_name">
          <el-input v-model="formAdd.goods_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth" prop="goods_price">
          <el-input v-model="formAdd.goods_price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" :label-width="formLabelWidth" prop="goods_number">
          <el-input v-model="formAdd.goods_number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" :label-width="formLabelWidth" prop="goods_weight">
          <el-input v-model="formAdd.goods_weight" autocomplete="off"></el-input>
        </el-form-item>
  
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBtnCommodity">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>

<script>
import {GoodsList_api,DeleteGoods_api,editCommodity_api} from "@/api/index.js"
  export default {
    data() {
      return {
        // 弹出层
        dialogFormVisible:false,
        formAdd:{
          goods_name:'',
          goods_price:'',
          goods_weight:'',
          goods_number:'',
          id:''
        },
        // 编辑商品表单验证
    addRules: {
        //用户名表单验证
        goods_name: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        goods_price: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        goods_weight: [{ required: true, message: "请输入密码", trigger: "blur" }],
        // 密码表单验证
        goods_number: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
       formLabelWidth: '120px',
        tableData: [],
        total:1,
        Goodsparams:{
            query:'',
            pagesize:10,
            pagenum:1
        }
      }
    },
    created() {
        // 调用获取商品列表的方法
        this.GetGoodsList()
    },
    methods: {
        // 分页
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.Goodsparams.pagesize = val
        // 调用获取商品列表的方法
        this.GetGoodsList()
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.Goodsparams.pagenum = val
        // 调用获取商品列表的方法
        this.GetGoodsList()
      },
     //定义一个 获取商品列表的方法
     async GetGoodsList(){
            const {data:res} = await GoodsList_api(this.Goodsparams)
            // console.log(res,767);
            this. tableData = res.data.goods 
            this.total = res.data.total
     },
    //  添加用户
    AddGoods(){
      this.$router.push('/goods/add')
    },
    // 编辑商品
    editCommodity(row){
      // console.log(row,1212);
      this.formAdd = row
      this.formAdd.id = row.goods_id
      this.dialogFormVisible=true
    },
    // 编辑商品弹出层确定按钮
    addBtnCommodity(){
          // 二次验证
        this.$refs.formAdd.validate(async valid=>{
            if(!valid) return
           this.dialogFormVisible=false
             const {data:res} = await editCommodity_api(this.formAdd)
             console.log(this.formAdd,87);
             console.log(res,1010);
            this.$message({
            type: 'success',
            message: res.meta.msg
          });
        // 刷新列表
       this.GetGoodsList()
        })
    },
    //  删除商品
     async DelGoodsBtn(id){
        //  console.log(row);
               this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //   发送请求
          const res = await DeleteGoods_api(id);
          this.$message({
            type: "success",
            message: res.data.meta.msg,
          });
          // 刷新列表
        this.GetGoodsList()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
     }
    },
  }
</script>
<style lang="less">
  
</style>